<template>
  <el-container class="fixed_cont" style="background-color: #fff">
    <el-header class="z_head w_container" height="80px" fixed>
      <div class="lt">
        <router-link to="/">
          <div class="logo_box">
            <img class="logo" src="@/assets/image/nlx.png" />
          </div>
        </router-link>
      </div>
      <div class="rt">
        <span v-if="isAuth" class="red_clr welcome"
          >欢迎您，{{ user.user.userName }}</span
        >
        <div class="no_auth" v-else>
          <span>
            <router-link to="/user/login" class="lk_btn">登录</router-link>
          </span>
          <span>
            <router-link to="/user/register" class="lk_btn">注册</router-link>
          </span>
        </div>
      </div>
      <div class="ct">
        <el-menu
          :default-active="activeIndex"
          active-text-color="#db1e1e"
          mode="horizontal"
          @select="handleSelect"
          router
        >
          <el-menu-item index="/main">主页</el-menu-item>
          <el-menu-item index="/doc">帮助文档</el-menu-item>
          <el-menu-item index="/temps">模板仓库</el-menu-item>
          <el-menu-item index="/study">技术文章</el-menu-item>
          <el-submenu index="/life">
            <template slot="title">生活点滴</template>
            <el-menu-item index="/life/movie">经典电影</el-menu-item>
            <el-menu-item index="/life/picts">画册</el-menu-item>
            <el-menu-item index="/life/net">站点导航</el-menu-item>
          </el-submenu>
          <el-menu-item index="/pugs">插件整理</el-menu-item>
        </el-menu>
      </div>
    </el-header>
  </el-container>
</template>
<script>
import { mapState } from 'vuex';
import Api from '@/api'

const routeList = {
  index: "/main",
  main: "/main",
  doc: "/doc",
  temps: "/temps",
  study: "/study",
  pugs: "/pugs",
  "life-movie": "/life/movie",
  "life-picts": "/life/picts",
  "life-net": "/life/net",
};
export default {
  data () {
    return {
      activeIndex: null,
      isAuth: false,
      userInfo: {}
    };
  },
  computed: {
    currentPage () {
      console.log(this.$route.name);
    },
    ...mapState(['user']),
  },
  methods: {
    handleSelect (index) {
      this.activeIndex = index;
    },
    getUserInfoFromSession () {
      let session = window.sessionStorage.getItem('user') || '{}';
      const { userName, userId } = JSON.parse(session);
      this.$store.dispatch('user/login', { userName, userId });
      if (userName && userId) this.isAuth = true;
      this.getUserInfo(userId);
    },
    getUserInfo (userId) {
      Api.getUserInfo(this.$axios, { id: userId }).then(res => {
        if (res.status == 200) {
          this.userInfo = res.data
        }
      });
    },

  },
  mounted () {
    const { name } = this.$route;
    this.activeIndex = routeList[name];
    const { userName, userId } = this.user.user || {};
    if (!(userName && userId)) {
      this.getUserInfoFromSession();
    } else {
      this.getUserInfo(userId);
      this.isAuth = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.fixed_cont {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.z_head {
  .lt {
    float: left;
    .logo_box {
      height: $z_header_height;
      padding: 20px;
      .logo {
        height: 35px;
      }
    }
  }
  .ct {
    padding: 0 120px 0 250px;
    text-align: right;
    .el-menu {
      display: inline-block;
      border: none;
      .el-menu-item {
        height: $z_header_height;
        line-height: $z_header_height;
        font-size: 16px;
        color: #333;
        position: relative;
        margin: 0 20px;
        padding: 0;
        border-bottom: none;
        &:hover,
        &.is-active {
          color: $primary_clr;
          font-weight: 700;
          &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 3px;
            background-color: $primary_clr;
            bottom: 18px;
            left: 0;
            right: 0;
          }
        }
      }
      .el-submenu {
        /deep/ .el-submenu__title {
          color: #333;
          font-size: 16px;
          height: $z_header_height;
          line-height: $z_header_height;
          margin: 0 20px;
          padding: 0;
          border-bottom: none;
        }
        &:hover,
        &.is-active {
          /deep/ .el-submenu__title {
            color: $primary_clr;
            font-weight: 700;
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 3px;
              background-color: $primary_clr;
              bottom: 18px;
              left: -3px;
              right: 0;
            }
          }
        }
      }
      &.el-menu--popup {
        .el-menu-item {
          font-size: 16px;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
  .rt {
    float: right;
    height: $z_header_height;
    line-height: $z_header_height;
    position: relative;
    .lk_btn {
      margin-top: 29px;
      font-size: 14px;
      color: $primary_clr;
      margin: 5px;
      cursor: pointer;
      user-select: none;
      &:hover {
        color: #333;
      }
    }
    .no_auth {
      &::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 14px;
        background: #c1b8b8;
        top: 34px;
        right: 40px;
      }
    }
    .welcome {
      font-size: 12px;
    }
  }
}
</style>
